<template>
  <div class="personalData">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">个人资料</div>
    </div>

    <div class="userContent">
      <van-cell title="头像"
                is-link>

        <div class="Loginavatar">
          <van-image round
                     width="50px"
                     height="50px"
                     :src="userInfo.userImg" />
        </div>
        <div class="Loginavatar-box">
          <van-uploader :after-read="UploadPicture" />
        </div>

      </van-cell>
      <van-field v-model="userInfo.nickName"
                 label="用户名"
                 input-align="right"
                 @blur="loseFocusSave" />

      <van-cell title="手机号"
                :value="userInfo.phone" />

      <van-cell title="ID"
                :value="userInfo.userId" />

      <van-field v-model="userInfo.desc"
                 label="个人简介"
                 input-align="right"
                 @blur="loseFocusSave" />

      <van-cell title="收货地址"
                is-link
                @click="goMyAddress" />

      <van-cell title="安全中心"
                is-link
                @click="goMyISetUp" />
    </div>
    <van-button round
                color="#0C34BA"
                type="primary"
                block
                @click="logOut">退出登录</van-button>
  </div>
</template>

<script>
export default {
  name: 'PersonalData',
  data () {
    return {
      //用户数据
      userInfo: {
        desc: '',
        nickName: '',
        userBg: '',
        userImg: '',
        phone: '',
        userId: ''
      }
    }
  },
  created () {
    this.getMyData();
  },

  methods: {
    //返回上一级
    back () {
      this.$router.go(-1);
    },

    // 跳转到我的地址
    goMyAddress () {
      this.$router.push({ name: 'MyAddress' });
    },
    goMyISetUp () {
      this.$router.push({ name: 'MyISetUp' });
    },
    //获取我的数据
    getMyData () {
      this.axios({
        method: 'get',
        url: '/findAccountInfo'
      }).then(result => {

        if (result.data.code == 'B001') {
          this.userInfo = result.data.result[0];
        }

      })
    },

    // 上传头像
    UploadPicture (file) {
      let imgType = file.file.type.split(/\//)[1]

      let serverBase64Img = file.content.replace(/data:image\/[A-Za-z]+;base64,/, '');

      this.axios({
        method: 'post',
        url: '/updateAvatar',
        data: {
          imgType,
          serverBase64Img
        }
      }).then(result => {
        if (result.data.code == 'H001' && result.data.result[0] == 1) {
          this.$toast.success(result.data.msg)
          this.userInfo.userImg = result.data.userImg

        }
      })
    },

    // 修改昵称
    getModifyNickname () {

      this.axios({
        method: 'POST',
        url: '/updateNickName',
        data: {
          nickName: this.userInfo.nickName
        }

      }).then(result => {

      })
    },

    // 修改个人简介
    getModifyProfile () {
      this.axios({
        method: 'POST',
        url: '/updateDesc',
        data: {
          desc: this.userInfo.desc
        }

      }).then(result => {

      })
    },

    // 失去焦点自动保存
    loseFocusSave () {
      this.getModifyProfile()
      this.getModifyNickname()
    },

    // 退出登录
    logOut () {
      this.$dialog.confirm({
        message: '是否退出登录?'
      }).then(() => {
        this.axios({
          method: 'post',
          url: '/logout',
        }).then(result => {
          if (result.data.code == "F001") {

            const toast = this.$toast.loading({
              duration: 0, // 持续展示 toast
              forbidClick: true,
              message: '正在退出...',
            });

            let second = 1;
            const timer = setInterval(() => {
              second--;
              if (second) {
                toast.message = `正在退出...`;

              } else {
                clearInterval(timer);
                // 手动清除 Toast
                this.$toast.clear();
                this.$router.push({ name: 'Login' })
              }
            }, 1000);

            return;
          }

        })
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.personalData {
  .van-nav-bar {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
  .van-button {
    position: absolute;
    width: 320px;
    margin-left: 25px;
    bottom: 20px;
  }
  .userContent {
    margin-top: 10px;
    position: relative;
    .van-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .Loginavatar {
        position: absolute;
        left: 0;
        right: 20px;
        height: 90px;
        line-height: 90px;
      }
      .Loginavatar-box {
        width: 100%;
        height: 60px;
        opacity: 0;
      }
      // .van-cell__title {
      //   font-size: 20px;
      // }
    }
  }
}
</style>